<template>
	<view class='bg'>
		<view class='date-week-time'>
			<view class="time">{{this.hours}}:{{this.minutes}}:{{this.seconds}}</view>
			<view  class="date-week">
				<view>{{this.month}}月{{this.day}}日</view>
				<view>{{this.dayOfWeek}}</view>
			</view>
		</view>
		<view style="height:0; padding-bottom:7%"></view>
		<view class='title'>
			<!-- <u-image height="50" mode="heightFix" src="@/static/bangding.png"></u-image> -->
			<view class="denglu">登录</view>
		</view>
		
		<view class='bg-form'>
			<view class="bangding-field">
			
				<u--form>
					
				
					<view class='bangding-item'>
						<view class='label'>账号：</view>
						<view class='input-field'>
							
							<u-input color="#fff" fontSize="18" placeholder="请输入账号"  class="" v-model="form.Account" />
							
						</view>
					</view>
					
					<view class='bangding-item'>
						<view class='label'>工号：</view>
						<view class='input-field'>
							
							<u-input color="#fff" fontSize="18" placeholder="请输入工号"  class="" v-model="form.UserCode" />
							
						</view>
					</view>
					
					<view class='bangding-item'>
						<view class='label'>密码：</view>
						<view class='input-field'>
							
							<u-input color="#fff" fontSize="18" type='password' placeholder="请输入密码"  class="input-field-u-input" v-model="form.Password" />
							
						</view>
					</view>
				<!--
					<view class='bangding-item'>
						<view class='label'>类型：</view>
						<view class='select-field'>
							<view @click="form.type='room'" class="type-btn " :class="{active:form.type=='room'}">房间设备</view>
							<view @click="form.type='public'" class="type-btn " :class="{active:form.type=='public'}">公用设备</view>						
							
						</view>
					</view>
				
					<view v-show="form.type=='room'" class='bangding-item'>
						<view class='label'>房间：</view>
						<view class='input-field'>
							
							<u-input color="#fff" fontSize="18" placeholder="请输入房间"  class="input-field-u-input" v-model="form.RoomCode" />
							
						</view>
					</view>
				-->
					<view class='bangding-item  btn-field'>
						
						<u-button @click="reset()" class=' form-btn reset'>重置</u-button>
						<u-button class=" form-btn queding" @click="doLogin">
							<text v-show="loading">登录中...</text>
							<text v-show="!loading">确定</text>
						</u-button>
					</view>
				
				</u--form>
			</view>
			
		</view>
		<u-toast ref="loginToast"></u-toast>
	</view>
</template>

<script >
	
	export default {
		data() {
			return {
				messageShow: false,
				year:'',
				month:'',
				day:'',
				hours:'',
				minutes:'',
				seconds:'',
				dayOfWeek:'',
				loading:0,
				form:{
					Account:'',
					UserCode:'',
					Password:'',
					type:'room'  ,// 取值：room, public
					RoomCode:''
				}
			}
		},
		onLoad:function(){
			
			this.init();
		},
		
		methods: {

			init:function(){
				
				var t = this;
				
				var UserCode = uni.getStorageSync('UserCode');
				var Account = uni.getStorageSync('Account');
				
				if( UserCode ){
					this.form.UserCode = UserCode;
				}
				
				if( Account ){
					this.form.Account = Account;
				}
				
				setInterval(function() {
					
					// 需要执行的代码		
					let now = new Date();
					 
					// 获取年、月、日、时、分、秒
					t.year = now.getFullYear();
					t.month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
					t.day = now.getDate();
					t.hours = now.getHours();
					t.minutes = now.getMinutes();
					t.seconds = now.getSeconds();
					if(t.seconds<10){
						t.seconds = '0'+t.seconds;
					}
					if(t.minutes<10){
						t.minutes = '0'+t.minutes;
					}
					if(t.day<10){
						t.day = '0'+t.day;
					}
					// 获取星期（0表示星期天，1表示星期一，以此类推）
					let weekday = now.getDay();
					 
					// 将星期转换为更易读的格式（例如：星期一）
					let weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
					t.dayOfWeek = weekdays[weekday];
				
				},1000);
				
			},
			
			doLogin:function(){

				if( this.loading ){
					return;
				}
				const CryptoJS = require("crypto-js");
				
				// var api_url = 'http://pay.51yitui.cn/PB/Meal/index';
				var api_url = 'https://open.cnzuzhi.com/PB/Meal/index';				
				
				api_url += '?method=checklogin';

				let timestamp = new Date().getTime();
				api_url += '&timestamp=' + timestamp;
				var params = {
					"Account"	:	this.form.Account,
					"UserCode"	:	this.form.UserCode,
					"Password"	:	this.form.Password,
					// "RoomCode"	:	this.form.type=='room'? this.form.RoomCode:'0000000000',
					"RoomCode"	:	'0000000000',
				};
				let paramsString = JSON.stringify( params );
				let message = 'ZMY*DC_2PB' + timestamp + paramsString ;
				var signature = CryptoJS.MD5(message).toString();
				signature = signature.slice(-32);
				api_url += '&signature=' + signature;
				// console.log( '校验：signature:', signature, 'A845E0E3EC3C2AE06410D21F0952AEF6');
				var data = {
					data: paramsString
				};
				
				var t = this;
				this.loading = 1;
				uni.request({
					url: api_url,
					data: data,
					method: 'POST',
					success: res => {

						if ( !res.data.status ) {
					
							
							// todo 保存 相关信息 并跳转页面
							// uni.setStorageSync('branchid', res.data.data.branchid);
							// uni.setStorageSync('branchname', res.data.data.branchname);
							// uni.setStorageSync('headid', res.data.data.headid);
							// uni.setStorageSync('RoomCode', res.data.data.RoomCode);
							// uni.setStorageSync('apiurl', res.data.data.apiurl);
							// uni.setStorageSync('billtype', res.data.data.billtype); //返回值：手牌模式，房间模式
							// uni.setStorageSync('UserCode', t.form.UserCode); 
							// uni.setStorageSync('Account', t.form.Account); 
							
							const storeArr = [
							    { key: 'branchid', value: res.data.data.branchid },
							    { key: 'branchname', value: res.data.data.branchname },
							    { key: 'headid', value: res.data.data.headid },
								{ key: 'RoomCode', value: res.data.data.RoomCode },
								{ key: 'apiurl', value: res.data.data.apiurl },
								{ key: 'billtype', value: res.data.data.billtype },
								{ key: 'UserCode', value: t.form.UserCode },
								{ key: 'Account', value: t.form.Account },
							];
							
							this.storeMultipleValues( storeArr,()=>{
								// todo 登录成功，
								this.showToast({
									type:'success',
									icon: false,
									title: "登陆",
									message: '登录成功',
									complete() {
										uni.navigateTo({
											url: '/pages/index/index',
										});
									},
								});
							});
							
						}else{
							
							// 显示框：提示登录失败失败
							this.showToast({
								type:'error',
								icon: false,
								title: "登陆",
								message: res.data.message,
							});
						}
					
					},
					fail: (error) => {
						
						console.error('上传失败:', error);
					},
					complete: () =>  {
						this.loading = 0;
					}
				});
			},
			showToast:function( params ){
				this.$refs.loginToast.show({
				  ...params,
				});
			},
			
			setStorage(key, value) {
			    return new Promise((resolve, reject) => {
			        uni.setStorage({
			            key: key,
			            data: value,
			            success: resolve,
			            fail: reject
			        });
			    });
			},
			storeMultipleValues(items, fn) {
			    const promises = items.map(item => this.setStorage(item.key, item.value));
			    Promise.all(promises).then(() => {
			        // 所有存储操作完成后执行的代码
			        console.log('所有存储操作已完成');
					fn();
			    }).catch(error => {
			        console.error('存储过程中出现错误', error);
			    });
			},
			
			reset:function(){
				this.form.Account	= '';
				this.form.UserCode	= '';
				this.form.Password	= '';
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.bg{
		
		width:100%;
		height:100vh;
		overflow:hidden;
		
		
		background-image: url('../../static/bdkuang.png');
		background-size: 100% 100%;
		
		.title{
			width:126px;
			height:50px;
			margin:0 auto 0;
			// text-align:center;
			// display:flex;
			// justify-content: center;
			.denglu{
				font-size:40px;
				font-weight: bold;
				color:#fff;
				letter-spacing: 20px;
			}
		}
		
		.date-week-time{
			color:#fff;
			position:absolute;
			    right: 30px;
			    top: 30px;
				.time{
					font-size: 40px;
				}
				.date-week{
					font-size: 18px;
					display: flex;
					justify-content: space-between;
				}
		}
		.bg-form{
			margin-top:50px;
			width: 100%;
			// height:100%;
			min-height:334px;
			display: flex;
			justify-content: center;
			// align-items: center;
			
			
		}
		
		
	}

	.bangding-field{
		
		display:flex;
		
		justify-content: center;
		
		margin-top:30px;
		padding-top:30px 0 20px;
		
		width: 674px;
		// height: 562px;
		height:auto;
		max-height:460px;
		background: linear-gradient( 134deg, rgba(255,255,255,0.13) 0%, rgba(140,116,97,0.13) 52%, rgba(104,85,69,0.13) 100%);
		border-radius: 22px;
		border: 2px solid;
		// border-image: linear-gradient(135deg, rgba(235, 217, 202, 1), rgba(214, 187, 168, 0.2), rgba(255, 222, 179, 0.59)) 2 2;
		border-color:rgba(235,217,202,0.8);
		backdrop-filter: blur(10px);
		
	}
	
	.bangding-item{
		
		margin-top: 16px;
		
		color: #FFF5E0;
		display:flex;
		
		justify-content: space-around;
		align-items: center;
		.label{
			
			
		}
		
		.select-field,.input-field{
			
			width: 502px;
			height: 52px;
			background: rgba(214,185,164,0.18);
			border-radius: 12px;
			border: 1px solid rgba(255,255,255,0.34);
			
			align-items: center;
			display: flex;
			color: #fff;
			.uni-input-input{
				color:#fff!important;
			}
			.u-input__content{
				color:#fff;				
			}
			
		}
		
		.select-field{
			
			border:none;
			background:none;
			display:flex;
			justify-content:flex-start;
			.type-btn{
				
				width: 120px;
				height: 52px;
				border-radius: 12px;
				
				margin-right:30px;
				
				
				display:flex;
				justify-content: center;
				align-items: center;
				
				border: 1px solid rgba(255,255,255,0.34);
				
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 18px;
				color: rgba(199,165,141,0.35);
				
				&.active{
					

					color: #000000;
					
					background: linear-gradient( 180deg, #DDC3AE 0%, #B89076 100%);
					border:none;
					
				}
			}
			
		}
		
		
		.form-btn{
			
			display:flex;
			justify-content: center;
			align-items: center;
			font-size:18px;
		}
		
		.reset{
			width: 142px;
			height: 52px;
			border-radius: 26px;
			border: 1px solid #00A9A6;
			color: #00A9A6;
			background-color: TRANSPARENT;
		}
		
		.queding{
			width: 142px;
			height: 52px;
			background: linear-gradient( 180deg, #00BEBB 0%, #008986 100%);
			border-radius: 26px;
			border-color: transparent;
			background-repeat: no-repeat;
			color:#fff;
			
			font-family: pingfang;
			border: none;
		}
		
		
	}
	
	
	.btn-field{
		
		display:flex;
		
		justify-content: space-around;
		
		
	}
	
	.u-input{
		
		border:none;
	}
</style>
